<template>
    <div class="card-main">
        <el-row :gutter="10">
            <el-col :span="6">
                <el-card class="box-card">
                    <Detail title="总销售额" count="¥ 123450" >
                        <template v-slot:chart>
                            <div style="padding-top:10px">
                            <!-- 周同比 -->
                            <span>周同比&nbsp;&nbsp;56.67%</span>
                            <i class="el-icon-caret-top"  style="color:red" v-if="true"></i>
                            <i class="el-icon-caret-bottom" style="color:green" v-else></i>
                            <!-- 日同比 -->
                            <span style="margin-left:20px">日同比&nbsp;&nbsp;19.98%</span>
                            <i class="el-icon-caret-top"  style="color:red" v-if="false"></i>
                            <i class="el-icon-caret-bottom" style="color:green" v-else></i>
                            </div>
                        </template>
                        <template v-slot:footer>
                            <div>
                                <span>日销售额¥ 14334</span>
                            </div>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <Detail title="访问量" count="33883">
                         <template v-slot:chart>
                            <!-- chart组件 -->
                            <lineChart></lineChart>
                         </template>
                         <template v-slot:footer>
                            <div>
                                <span>日访问量 1324</span>
                            </div>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <Detail title="支付笔数" count="66883">
                        <template v-slot:chart >
                             <!-- chart组件 -->
                             <barChart></barChart>
                        </template>
                        <template v-slot:footer>
                            <div>
                                <span>转化率 65%</span>
                            </div>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card class="box-card">
                    <!-- 第四个card -->
                    <Detail title="运营活动效果" count="78%">
                     <template v-slot:chart>
                            <!-- chart组件 -->
                            <progressChart count="78"></progressChart> 
                     </template>
                        <template v-slot:footer>
                            <div>
                                <!-- 周同比 -->
                                <span>周同比&nbsp;&nbsp;34.34%</span>
                                <i class="el-icon-caret-top"  style="color:red" v-if="true"></i>
                                <i class="el-icon-caret-bottom" style="color:green" v-else></i>
                                <!-- 日同比 -->
                                <span style="margin-left:20px">日同比&nbsp;&nbsp;12.23%</span>
                                <i class="el-icon-caret-top"  style="color:red" v-if="false"></i>
                                <i class="el-icon-caret-bottom" style="color:green" v-else></i>
                            </div>
                        </template>
                    </Detail>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Detail  from '@/views/dashboard/Card/Detail'
import lineChart from '@/views/dashboard/Card/lineChart'
import barChart from  '@/views/dashboard/Card/barChart'
import progressChart from '@/views/dashboard/Card/progressChart'

export default {
     name:'Card',
     components:{
         Detail,
         lineChart,
         barChart,
         progressChart
     },
     data() {
        return {
            charts:{
                
            }
        }
     },

}
</script>

<style scoped lang="scss">
   
</style>